<template>
	<div class="app">
		<h2>求和为：{{ sum }}</h2>
		<h2>名字为:{{ person.name }}</h2>
		<h2>年龄为:{{ person.age }}</h2>
		<h2>汽车为：{{ car }}</h2>
		<button @click="changeSum">sum+1</button>
		<button @click="changeName">改名</button>
		<button @click="changeAge">改年龄</button>
		<button @click="changePerson">改人</button>
		<span>|</span>
		<button @click="changeBrand">改品牌</button>
		<button @click="changeColor">改颜色</button>
		<button @click="changeEngine">改发动机</button>
		<button @click="changeCar">改整车</button>
	</div>
</template>

<script setup lang="ts" name="App">
	import { ref,reactive,shallowRef ,shallowReactive} from 'vue';

	let sum = shallowRef(0)
	let person = shallowRef({
		name:'张三',
		age:18
	})
	let car = shallowReactive({
		brand:'奔驰',
		option:{
			color:'red',
			engine:'v8'
		}
	})
	function changeSum(){
		sum.value += 1
	}
	function changeName(){
		person.value.name = '李四'
	}
	function changeAge(){
		person.value.age = 22
	}
	function changePerson(){
		person.value = {name:'王五',age:80}
	}

	function changeBrand(){
		car.brand = '奥迪'
	}
	function changeColor(){
		car.option.color = 'black'
	}
	function changeEngine(){
		car.option.engine='V9'
	}
	function changeCar(){

		// car = {brand:'凯迪拉克',option:{color:'yellow',engine:'V10'}}
		Object.assign(car,{brand:'凯迪拉克',option:{color:'yellow',engine:'V10'}})
	}
</script>

<style scoped>
	.app{
		background-color: #ddd;
		border-radius: 10px;
		box-shadow: 0 0 10px;
		padding: 10px;
		margin-top: 20px;
	}
	button{
		margin:0 5px;
	}
</style>